<template>
    <div class="loan-application">
        <el-form status-icon :label-position="labelPosition" :model="temp" :rules="rules" ref="temp" label-width="100px">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>个人基本信息</span>
                </div>
                <el-row :gutter="10">
                    <el-col :xs="24" :sm="12" :md="8" :lg="8">
                        <el-form-item label="姓名" prop="name">
                            <el-input v-model="temp.name" placeholder="请输入真实姓名"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="8">
                        <el-form-item label="身份证" prop="identity_card">
                            <el-input v-model="temp.identity_card" placeholder="本人有效身份证号" />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="8">
                        <el-form-item label="手机号" prop="mobile_phone">
                            <el-input v-model.number="temp.mobile_phone" placeholder="现使用手机号" />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :xs="24" :sm="12" :md="8" :lg="8">
                        <el-form-item label="户籍地址" prop="address2">
                            <el-input v-model="temp.address2" placeholder="身份证或户口本上地址" />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="8">
                        <el-form-item label="居住地址" prop="address1">
                            <el-input v-model="temp.address1" placeholder="现居住地址" />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="8">
                        <el-form-item label="居住电话" prop="phone">
                            <el-input v-model.number="temp.phone" placeholder="现居住地电话" />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :xs="24" :sm="12" :md="12" :lg="6">
                        <el-form-item label="性别" prop="sex">
                            <el-select v-model="temp.sex" placeholder="请选择">
                                <el-option v-for="v in sexOptions" :key="v.key" :label="v.display_name" :value="v.key"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="6">
                        <el-form-item label="婚姻状态" prop="marriage">
                            <el-select v-model="temp.marriage" class="filter-item" placeholder="请选择">
                                <el-option v-for="item in marriageOptions" :key="item.key" :label="item.display_name" :value="item.key" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="6">
                        <el-form-item label="教育程度" prop="education">
                            <el-select v-model="temp.education" class="filter-item" placeholder="请选择">
                                <el-option v-for="item in educationOptions" :key="item.key" :label="item.display_name" :value="item.key" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="6">
                        <el-form-item label="出生日期" prop="birthday">
                            <el-date-picker type="date" placeholder="选择日期" v-model="temp.birthday"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-card>

            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>职业信息</span>
                </div>
                <el-row :gutter="10">
                    <el-col :xs="24" :sm="12" :md="8" :lg="8">
                        <el-form-item label="公司全称" prop="company">
                            <el-input v-model="temp.company" placeholder="公司注册名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="8">
                        <el-form-item label="职位" prop="position">
                            <el-input v-model="temp.position" placeholder="在职职位"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="8">
                        <el-form-item label="公司地址" prop="address3">
                            <el-input v-model="temp.address3" placeholder="公司详细地址"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="10">
                    <el-col :xs="24" :sm="12" :md="8" :lg="8">
                        <el-form-item label="公司类型" prop="company_type">
                            <el-input v-model="temp.company_type" placeholder="公司注册类型"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="8">
                        <el-form-item label="公司邮箱" prop="company_email">
                            <el-input v-model="temp.company_email" placeholder="现用邮箱"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="8">
                        <el-form-item label="公司电话" prop="company_phone">
                            <el-input v-model="temp.company_phone" placeholder="公司固定电话"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="6" :lg="6">
                        <el-form-item label="所属行业" prop="trade">
                            <el-select v-model="temp.trade" class="filter-item" placeholder="请选择">
                                <el-option v-for="item in companyOptions" :key="item.key" :label="item.display_name" :value="item.key" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-card>

            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>收支情况</span>
                </div>
                <el-row :gutter="10">
                    <el-col :xs="24" :sm="12" :md="8" :lg="8">
                        <el-form-item label="收支情况" prop="income">
                            <el-input v-model="temp.income" placeholder="收入（k/月）" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-card>

            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>家庭联系人</span>
                </div>
                <el-row :gutter="10">
                    <el-col :xs="24" :sm="12" :md="8" :lg="8">
                        <el-form-item label="关系" prop="contact">
                            <el-input v-model="temp.contact" placeholder="家庭关系" />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="8">
                        <el-form-item label="姓名" prop="contact_name">
                            <el-input v-model="temp.contact_name" placeholder="家庭人员姓名" />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="8">
                        <el-form-item label="手机" prop="contact_phone">
                            <el-input v-model.number="temp.contact_phone" placeholder="现用手机号" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-card>

            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>工作证明人</span>
                </div>
                <el-row :gutter="10">
                    <el-col :xs="24" :sm="12" :md="8" :lg="8">
                        <el-form-item label="关系" prop="contact2">
                            <el-input v-model="temp.contact2" placeholder="工作关系" />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="8">
                        <el-form-item label="姓名" prop="contact2_name">
                            <el-input v-model="temp.contact2_name" placeholder="请输入真实姓名" />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="8">
                        <el-form-item label="手机" prop="contact2_phone">
                            <el-input v-model.number="temp.contact2_phone" placeholder="现用手机号" />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="10">
                    <el-col :xs="24" :sm="12" :md="8" :lg="8">
                        <el-form-item label="部门" prop="contact2_dep">
                            <el-input v-model="temp.contact2_dep" placeholder="所在部门" />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="8">
                        <el-form-item label="职位" prop="contact2_pos">
                            <el-input v-model="temp.contact2_pos" placeholder="在职职位" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :xs="24" :sm="12" :md="8" :lg="8">
                        <el-form-item label="备注">
                            <el-input
                                v-model="temp.remark"
                                :autosize="{ minRows: 2, maxRows: 4 }"
                                type="textarea"
                                placeholder="备注信息"
                                maxlength="100"
                                show-word-limit
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-card>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm('temp')">创建</el-button>
            <el-button type="warning" @click="resetForm('temp')">重置</el-button>
        </div>
    </div>
</template>

<script>
import { sexOptions, companyOptions, marriageOptions, educationOptions } from '@/utils/selectData'
import httpRequest from '@/api/http.js'

export default {
    data() {
        // 手机号验证
        var changePhoe = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('手机号不能为空'))
            }
            setTimeout(() => {
                if (!Number.isInteger(value)) {
                    callback(new Error('请输入数字值'))
                } else {
                    if (/0?(13|14|15|18)[0-9]{9}/.test(value)) {
                        callback()
                    } else {
                        callback(new Error('必须输入正确的手机号'))
                    }
                }
            }, 200)
        }

        // 身份证验证
        var changeCard = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('身份证号不能为空'))
            }
            setTimeout(() => {
                if (/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
                    callback()
                } else {
                    callback(new Error('请输入正确格式的身份证号'))
                }
            }, 200)
        }

        // 邮箱验证
        var changeEmail = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('邮箱不能为空'))
            }
            setTimeout(() => {
                if (/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/.test(value)) {
                    callback()
                } else {
                    callback(new Error('请输入正确格式的邮箱'))
                }
            }, 200)
        }

        // 姓名验证
        var changeName = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('姓名不能为空'))
            }
            setTimeout(() => {
                if (/^[\u4e00-\u9fa5]{2,6}$/.test(value)) {
                    callback()
                } else {
                    callback(new Error('请输入2到6个汉字组成的姓名'))
                }
            }, 200)
        }

        // 收支验证
        var changeIncom = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('收支不能为空'))
            }
            setTimeout(() => {
                if (value >= 1 && value <= 100) {
                    callback()
                } else {
                    callback(new Error('我不相信！我不相信！我不相信！'))
                }
            }, 200)
        }

        // 公司固定电话
        var changeCompanyPhoe = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('电话不能为空'))
            }
            setTimeout(() => {
                if (/\d{3}-\d{8}|\d{4}-\d{7}/.test(value)) {
                    callback()
                } else {
                    callback(new Error('电话格式为：xxx-xxxxxxxx或xxxx-xxxxxxx'))
                }
            }, 200)
        }
        return {
            labelPosition: 'right',
            temp: {
                name: '', //姓名
                identity_card: '', //身份证
                birthday: '', //出生日期
                sex: '', //性别
                marriage: '', //婚姻状态
                education: '', //教育程度
                address1: '', //居住地址
                address2: '', //户籍地址
                phone: '', //居住电话
                mobile_phone: '', //手机号
                company: '', //现职公司全称
                trade: '', //所属行业
                position: '', //职位
                address3: '', //公司地址
                company_type: '', //公司类型
                company_email: '', //公司邮箱
                company_phone: '', //公司电话
                income: '', //收支情况
                contact: '', //关系1
                contact_name: '', //姓名
                contact_phone: '', //手机
                contact2: '', //关系2
                contact2_name: '', //姓名
                contact2_phone: '', //手机
                ontact2_dep: '', //部门
                contact2_pos: '', //职位
                remark: '', //备注
            },
            rules: {
                name: [{ required: true, trigger: 'blur', validator: changeName }],
                birthday: [{ required: true, message: '请选择日期', trigger: 'change' }],
                sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
                identity_card: [{ required: true, trigger: 'blur', validator: changeCard }],
                marriage: [{ required: true, message: '请选择婚姻状态', trigger: 'change' }],
                education: [{ required: true, message: '请选择教育程度', trigger: 'change' }],
                trade: [{ required: true, message: '请选择所属行业', trigger: 'change' }],

                address1: [{ required: true, message: '请输入居住地址', trigger: 'blur' }],
                address2: [{ required: true, message: '请输入户籍地址', trigger: 'blur' }],
                phone: [{ required: true, trigger: 'blur', validator: changePhoe }],
                mobile_phone: [{ required: true, trigger: 'blur', validator: changePhoe }],
                company: [{ required: true, message: '请输入现职公司全称', trigger: 'blur' }],
                position: [{ required: true, message: '请输入职位', trigger: 'blur' }],
                address3: [{ required: true, message: '请输入公司地址', trigger: 'blur' }],
                company_type: [{ required: true, message: '请输入公司类型', trigger: 'blur' }],
                company_email: [{ required: true, trigger: 'blur', validator: changeEmail }],
                company_phone: [{ required: true, trigger: 'blur', validator: changeCompanyPhoe }],
                income: [{ required: true, trigger: 'blur', validator: changeIncom }],
                contact: [{ required: true, message: '请输入关系1', trigger: 'blur' }],
                contact_name: [{ required: true, trigger: 'blur', validator: changeName }],
                contact_phone: [{ required: true, trigger: 'blur', validator: changePhoe }],
                contact2: [{ required: true, message: '请输入关系2', trigger: 'blur' }],
                contact2_name: [{ required: true, trigger: 'blur', validator: changeName }],
                contact2_phone: [{ required: true, trigger: 'blur', validator: changePhoe }],
                contact2_dep: [{ required: true, message: '请输入部门', trigger: 'blur' }],
                contact2_pos: [{ required: true, message: '请输入职位', trigger: 'blur' }],
            },
            sexOptions,
            companyOptions,
            marriageOptions,
            educationOptions,
        }
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$confirm('是否提交数据？', '温馨提示', {
                        confirmButtonText: '确定',
                        cancelBurronText: '取消',
                        type: 'warning',
                        center: true,
                    })
                        .then(() => {
                            httpRequest.loanCreate(this.temp).then((res) => {
                                let { message } = res
                                this.$router.push('/input-manager')
                                this.$message({
                                    type: 'success',
                                    message,
                                    showClose: true,
                                })
                            })
                        })
                        .catch(() => {
                            this.$message({
                                type: 'info',
                                message: '提交已取消',
                                showClose: true,
                            })
                        })
                } else {
                    this.$message({
                        type: 'warning',
                        message: '请将所有内容按格式填写完成！',
                        showClose: true,
                    })
                }
            })
        },
        resetForm(formName) {
            this.$refs[formName].resetFields()
        },
    },
}
</script>

<style scoped lang="less">
.box-card {
    margin-bottom: 15px;
}

.dialog-footer {
    width: 30%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    .el-button {
        width: 40%;
        // text-align: center;
    }
}
</style>
